<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>resizable-dom</title>
</head>
<body>
<div id="demo"
     style="width: 200px; height: 200px;border: solid 2px red;bottom: 50px;left: 50px;">
  <div style="width: 100%; height: 100%; background-color: #ddd">我可以改变尺寸~</div>
</div>
<script>
  window.onload = function () {
    const demo = document.getElementById('demo')
    const callback = function () {
      console.log('ok')
    }
    new Resizable.Resizable(demo, {
      handles: ['e', 'w', 'n', 's', 'nw', 'ne', 'sw', 'se'],
      initSize: {
        maxWidth: 500,
        maxHeight: 500,
        minWidth: 100,
        minHeight: 100
      }
    }, callback)
  }
</script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?eeb2f14b61d856eebbc89121d0ad913d";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
</body>
</html>
